<template>
	<view class="edit-info">
		<view class="create-project-form">
			<view class="create-item">
				<text class="info-item-title">姓名</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass" placeholder="请输入姓名"
					v-model="name">
			</view>

			<view class="create-item">
				<text class="info-item-title">手机号</text>
				<input class="info-item-input" type="text" maxlength="11" placeholder-class="placeholderFontClass"
					placeholder="请输入手机号" v-model="phone">
			</view>

			<view class="create-item">
				<text class="info-item-title">所在地区</text>
				<AddressPicker @change="districtChange" :level="3">
					<text class="district-text" :class="{'selected-text': isDistrictSure}">{{planLocate}}</text>
				</AddressPicker>
			</view>

			<view class="create-item">
				<text class="info-item-title">详细地址</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="例：xx街xx楼xx号" v-model="detailAddress">
			</view>


		</view>
		<button class="create-btn" @click.stop.prevent="handleSave">提交</button>

	</view>
</template>

<script>
	import AddressPicker from "@/packageA/components/lingdang-AddressPicker/AddressPicker.vue";
	import apiRqs from "@/api/api-request.js";
	export default {
		components: {
			AddressPicker
		},
		data() {
			return {
				name: '',
				phone: '',
				address: '',
				detailAddress: '',
				tokenInfo: {},
				planLocate: '请选择地区',
				isDistrictSure: false,
			}
		},
		onShow() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			if (tokenInfo) {
				this.tokenInfo = tokenInfo;
			}
		},

		methods: {
			districtChange(result) {
				console.log(JSON.stringify(result.data));
				this.planLocate = '';
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.planLocate += item.name
					} else {
						this.planLocate += '-' + item.name
					}
				});
				let arr = this.planLocate.split('-');
				this.isDistrictSure = true;
				console.log(arr)
			},
			handleSave() {
				let giftItem = uni.getStorageSync("giftItem");
				let {
					name,
					phone,
					planLocate,
					detailAddress,
				} = this;
				if (name.trim() == "") {
					getApp().showToast("姓名不能为空");
					return false;
				} else if (phone.trim() == "") {
					getApp().showToast("手机号不能为空");
					return false;
				} else if (planLocate == "请选择地区") {
					getApp().showToast("所在地区不能为空");
					return false;
				} else if (detailAddress.trim() == "") {
					getApp().showToast("详细地址不能为空");
					return false;
				} else {
					let province = planLocate.split("-")[0];
					let city = planLocate.split("-")[1];
					let cityArea = planLocate.split("-")[2];
					getApp().showLoading();
					var that = this;
					let rqs = {
						"id": giftItem.mallLogistics,
						"province": province,
						"city": city,
						"cityArea": cityArea ? cityArea : "",
						"detailedAddress": detailAddress,
						"contacts": name,
						"mobile": phone,
					};
					console.log('提交收货地址数据', rqs);
					apiRqs._addressSubmit(rqs).then((res) => {
						console.log('提交结果', res);
						uni.hideLoading();
						if (res.code == 200) {
							getApp().showToast("提交成功", "success");
							setTimeout(() => {
								uni.navigateBack();
							}, 1500)
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err);
					})
				}


			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.edit-info {
		.create-project-form {
			margin: 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.district-text {
					font-size: 14px;
					color: #ddd;

					&.selected-text {
						color: #666;
					}
				}

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
